<template>
	<view class="view_main">
		<!-- 查询好友申请列表 -->
		<view v-for="u in users" class="users_view">
			<view class="userInfo_view">
				<image :src="$.getImg(u.header)" ></image>
				<view class="view1">
					<view class="sex_view">
						<text style="font-weight: bold; font-size: 40rpx ;margin-right: 10rpx;">{{u.nickname}}</text>
						<image class="sex" :src="u.sex == 0 ? '/static/man.png' : '/static/woman.png'"></image>
					</view>
					<text style="font-size: 20rpx;">申请信息：{{u.info ? u.info : "无"}}</text>
				</view>
			</view>
			<view v-if="u.status == 0" class="button_view">
				<button size="mini" @click="requestOk(u.id, 1)">同意</button>
				<button size="mini" type="default" style="background-color: #dd5f5f;" @click="requestHandler(u.id, 2)">拒绝</button>
			</view>
			<view v-if="u.status == 1" class="button_view" style="display: flex; justify-content: flex-end;">
				<text style="color: green; font-size: 20rpx;">已同意</text>
			</view>
			<view v-if="u.status == 2" class="button_view" style="display: flex; justify-content: flex-end;">
				<text style="color: red; font-size: 20rpx;">已拒绝</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				users: []
			}
		},
		onLoad() {
			this.queryFriendRequestList();
		},
		methods: {
			// 请求我的好友申请列表
			queryFriendRequestList() {
				this.$.ajax({
					url: '/friendsRequest/queryFriendRequestList',
					success: (requestList) => {
						this.users = requestList
					}
				});
			},
			// 同意好友申请的设置备注的模态框
			requestOk(rid) {
				uni.showModal({
					title: '输入好友备注',
					editable: true,
					confirmText: "同意",
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定', res.content);
							this.requestHandler(rid, 1, res.content);
						}
					}
				});
			},
			// 同意/拒绝请求处理器
			requestHandler(rid, status, beizhu) {
				//console.log("rid->",rid,"  status->",status, " beizhu->",beizhu);
				this.$.ajax({
					type: 'POST',
					url: '/friendsRequest/requestHandler',
					data: {
						id: rid,
						status: status,
						beizhu: beizhu
					},
					success: (res) => {
						this.queryFriendRequestList();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.view_main {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.users_view {
			width: 80%;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.userInfo_view {
				display: flex;

				.view1 {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					padding: 10rpx 0;
					box-sizing: border-box;
					
					.sex_view {
						display: flex;
						margin-bottom: 5rpx;
						
						.sex {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}

			.button_view {
				display: flex;
				
				button {
					background-color: #00A2FF;
					color: white;
					margin: 20rpx 30rpx 0 0;
					box-shadow: 10rpx 10rpx 10rpx gray;
				}

				button:active {
					background-color: #3ab4ff;
					position: relative;
					top: 5rpx;
					left: 5rpx;
					box-shadow: 5rpx 5rpx 5rpx gray;
				}
			}
		}
	}
</style>
